<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">
				<view @click="$refs.drawer.open" style="font-size: 16px;">
					<view>{{parm.date}}</view>
					<view>{{parm.className}}</view>
				</view>
			</block>
			<view slot="right" style="color: #fff;font-size: 16px;margin-right: .7em;" @click="$refs.drawer.open">
				<text>筛选</text>
				<text class="iconfont icon-shaixuan" style="font-size: .75em;"></text>
			</view>
		</cu-custom>
		<a-fixed :height="40">
			<a-tabs @click="inquire" :row="tabs.length" type="border" :value="tabs"></a-tabs>
		</a-fixed>
		<a-grid class='grid' :list="statistics" :cell="3" :closeHeight="true">
			<template #default="{row}">
				<view @click="statisticsClick(row)" :class="row.id == parm.statisticsId?'focus':''" class="statistics">
					<view style="font-size: 14px;">{{row.lable}}</view>
					<view style="font-size: 14px;color: #0062CC;">{{row.value}}</view>
				</view>
			</template>
		</a-grid>
		<a-search style="border: 1px solid #c1c1c1;margin: 10px 15px;" placeholder="输入姓名搜索" @change="search" />
		<a-scroll :request="get" ref="aScroll">
			<template #item="{row:x,index}">
				<a-list :value="x">
					<template #right>
						<text class="in-out" :class="index%2?'out':'in'">
							{{index%2?'出':"入"}}
						</text>
					</template>
				</a-list>
			</template>
		</a-scroll>
		<!--右抽屉-->
		<uni-drawer ref="drawer" mode="right" :width="300">
			<y-form :keys="columns" v-model="info" @submit="submit" />
		</uni-drawer>
	</view>
</template>

<script>
	import yForm from "@/y-ui/y-form/y-form.vue";
	import {format} from "@/a/utils/api.js";
	export default {
		components: {
			yForm
		},
		//上拉触底
		onReachBottom() {
			this.$refs.aScroll.lower();
		},
		//下拉刷新
		onPullDownRefresh() {
			this.$refs.aScroll.get(true).then(res => {
				uni.stopPullDownRefresh();
			});
		},
		data() {
			return {
				tabs: [{
					id: 0,
					name: "老师"
				}, {
					id: 1,
					name: "学生"
				}],
				info: {},
				parm: {
					date:format(new Date(),'yyy-MM-dd'),
					className:'全部'
				},
				statistics: [{
						id: "asd6",
						lable: "进校人次/人数",
						value: "112/434"
					},
					{
						id: "asd5",
						lable: "出校人次/人数",
						value: "44/434"
					},
					{
						id: "asd4",
						lable: "正常人次/人数",
						value: "123/434"
					},
					{
						id: "asd3",
						lable: "迟到人次/人数",
						value: "2/434"
					},
					{
						id: "asd2",
						lable: "请假人数",
						value: "0"
					},
					{
						id: "asd1",
						lable: "未出入人数",
						value: "123"
					}
				]
			}
		},
		computed: {
			columns() {
				return [{
					type: 'yPicker',
					key: 'className',
					lable: '班级：',
					placeholder: '请选择',
					range: [{
						name: "全部",
						id: ''
					}, {
						name: "八年级一班",
						id: 1
					}],
					rangeKey: 'name',
					valueKey: 'name'
				}, {
					type: 'yPicker',
					key: 'date',
					lable: '日期：',
					placeholder: '请选择',
					mode: 'date'
				}];
			}
		},
		methods: {
			inquire(e) {
				this.parm.filterId = e.id;
				this.$refs.aScroll.get(true);
			},
			search(e) {
				this.parm.searchText = e;
				this.$refs.aScroll.get(true);
			},
			statisticsClick(e) {
				this.$set(this.parm, "statisticsId", e.id == this.parm.statisticsId ? '' : e.id);
				this.$refs.aScroll.get(true);
			},
			submit(e) {
				if (!e) return;
				this.parm = {
					...this.parm,
					...this.info
				}
				this.$refs.aScroll.get(true);
				this.$refs.drawer.close();
			},
			async get(parm = {}) {
				const data = new Array(15).fill({
					name: "喜来乐",
					phone: "2020-11-12 22:33:11",
					sonTitle: "八年级",
					remark: "10号闸机",
					hideIcon: true,
					img: require('./1.png')
				});
				console.log('请求：' + JSON.stringify({
					...parm,
					...this.parm
				}));
				return new Promise(r => {
					setTimeout(e => {
						r({
							total: 200,
							data
						})
					}, 1000);
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
		height: 100%;
	}

	.statistics {
		margin: 5px;
		padding: 10px 5px;
		font-size: 18px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex: 1;
		box-sizing: border-box;

		&.focus {
			border-radius: 6px;
			border: 1px solid #007AFF;
			background-color: rgba(112, 179, 253, .8);
		}
	}


	.in-out {
		font-size: 18px;
		width: 2em;
		height: 2em;
		line-height: 2em;
		border-radius: 50%;
		text-align: center;
		color: #fff;

		&.in {
			background-color: #06AD56;
		}

		&.out {
			background-color: red;
		}
	}
</style>
